<template>
<div class="editUser">
    <el-form :model="userinfo" :rules="rules" ref="userinfo">
        <el-form-item label="昵&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp称" prop="nickname" class="edit-input" id="nickname">
            <el-input v-model="userinfo.nickname" placeholder="请修改昵称" clearable></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="name" class="edit-input">
            <el-input v-model="userinfo.name" placeholder="请修改姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="密&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp码" prop="password" class="edit-input">
            <el-input type="password" v-model="userinfo.password" placeholder="请修改密码" clearable></el-input>
        </el-form-item>
        <el-form-item label="邮&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp箱" prop="email" class="edit-input">
            <el-input v-model="userinfo.email" placeholder="请修改邮箱"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" prop="phone" class="edit-input">
            <el-input v-model="userinfo.phone" placeholder="请修改电话号码"></el-input>
        </el-form-item>
        <el-form-item label="头&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp像" prop="headerPic" class="edit-upload">
          <el-upload class="avatar-uploader" list-type="picture" :action="action" @change="handlePreview" :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <template #tip>
              <div class="el-upload__tip">
                请上传.jpg .jpeg .png .bmp .webp .bif格式
              </div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="">
            <el-button type="primary" @click="save()" class="edit-btnSave">保存修改</el-button>
            <el-button type="" @click="cancel()" class="edit-btnCancel">取消修改</el-button>
        </el-form-item>
    </el-form>
</div>
    
</template>
<script>
import Index from '@/components/Index'
import instance from '@/utlis/request.js';
import instanceToken from '@/utlis/tokenIdentify.js';
export default {
    name:'EditUserView',
    components:{
        Index,
    },
    data(){
        var checkNickname = (rule,value,callback) => {
            if(!(/^[u4e00-u9fa5]{3,8}$/.test(value))){
                callback(new Error('昵称请输入3~8个字符'));
            }
        };
        var checkPhone = (rule,value,callback) => { 
            
            if(!(/^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/.test(value))){ 
                callback(new Error('手机号码格式有误'));                  
            }
        };
        return{
            imageUrl: '',
            userinfo:{
                id:'',
                name:'',
                nickname:'',
                phone:'',
                email:'',
                password:'',
                headerPic:'',
            },
            companyUser:{
                id:'',
                positionId:'',
            },
            rules: {
                name:[
                    {required:true,message:'真实姓名不能为空',trigger:'blur'}
                ],
                nickname:[
                    {required:true,message: '昵称不能为空',trigger:'blur'},
                    {validator:checkNickname,trigger:'blur'}
                ],
                phone:[
                    {required:true,message: '电话不能为空',trigger:'blur'},
                    {validator:checkPhone,trigger:'blur'}
                ],
                email:[
                    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                ],
                password:[
                    {required:true,message: '密码不能为空',trigger:'blur'}
                ],
                headerPic:[
                    {required:true,message: '头像不能为空',trigger:'blur'}
                ],
            }
        };
        
    },
    created(){
        this.initData();
    },
    methods:{
        //文件预览
        handlePreview(file){
            this.file = file;
            this.imageUrl = file.url;
        },
        initData(){
            var loginUser = window.sessionStorage.getItem("loginUser");
            this.userinfo = JSON.parse(loginUser);
            
            instanceToken.get("userinfo/initEditData/"+this.userinfo.id).then(res => {
                
                this.companyUser = res.data.data;
            })
        },
        save(){
           
            // var file=this.$refs.pic.files[0];
            var formData = new FormData();
            formData.append("file",this.file.raw);
            formData.append("id",this.userinfo.id);
            formData.append("name",this.userinfo.name);
            formData.append("nickname",this.userinfo.nickname);
            formData.append("phone",this.userinfo.phone);
            formData.append("email",this.userinfo.email);
            formData.append("password",this.userinfo.password);
            instanceToken.post("userinfo/saveUserinfo",formData,
            {headers:{'content-type':'multipart/form-data'}}).then(res => {
                if(res.data.success){
                    this.$alert('修改成功','修改',{
                        confrimButtonText:'确定',
                    });
                    this.cancel();
                    
                }
            })
        },
        cancel(){
            if(this.companyUser == null){
                this.$router.push({name:"PersonalIndexView"});               
            }
            else{
                if(this.companyUser.positionId==1 && !this.companyUser.flag){
                    this.$router.push({name:"CompanyIndexView"});
                }
                else if(this.companyUser.positionId==2 && !this.companyUser.flag){
                    this.$router.push({name:"MinisterIndexView"});
                }
                else if(this.companyUser.positionId==3 && !this.companyUser.flag){
                    this.$router.push({name:"MemberIndexView"});
                }
            }
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
           
            const isJPG = file.type === 'image/jpeg';
            const isJPEG = file.type === 'image/jpeg';
            const  isWebp = file.type === 'image/webp';
            const  isPNG = file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG && !isWebp && !isJPEG && !isPNG) {
                this.$message.error('上传头像图片只能是 JPG,JPEG,Webp,PNG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isWebp && isLt2M;
        }
    }
}
</script>
<style scoped>
.editUser{
    width: 1000px;
    height: 700px;
    margin: 0 auto;
    box-shadow: 0 2px 4px rgba(39, 36, 36, 0.12);
}
.edit-upload{
    margin-top: 10px;
    margin-left: 200px;
}
.edit-input{
    width: 600px;
    margin-top: 10px;
    margin-left: 200px;
}
.edit-btnSave{
    margin-left: 400px;
}
.edit-btnCancel{
    margin-left: 100px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>